<template>
  <div class="E-popover-playlist-classify no-scroll-bar">
    <span @click="$emit('onClick', '')" :class="{active:!curTag}" class="btn btn-block">全部歌单</span>
    <dl v-for="(item, index) in classify" :key="index">
      <dt>
        <!-- <i class="el-icon-picture-outline-round" /> -->
        {{item.title}}
      </dt>
      <dd>
        <ul>
          <li
            @click="$emit('onClick', it)"
            :class="{active:curTag===it}"
            class="btn text-ellipsis"
            v-for="(it, i) in item.tags"
            :key="i"
          >{{it}}</li>
        </ul>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  props: ['curTag'],
  data() {
    return {
      classify: [
        {
          title: '语种',
          icon: '',
          tags: ['华语', '欧美', '日语', '韩语', '粤语']
        }, {
          title: '风格',
          icon: '',
          tags: ['流行', '摇滚', '民谣', '电子', '舞曲', '说唱', '轻音乐', '爵士', '乡村', 'R&B/Soul', '古典', '民族', '英伦', '金属', '朋克', '蓝调', '雷鬼', '世界音乐', '拉丁', 'New Age', '古风', '后摇', 'Bossa Nova']
        }, {
          title: '场景',
          icon: '',
          tags: ['清晨', '夜晚', '学习', '工作', '午休', '下午茶', '地铁', '驾车', '运动', '旅行', '散步', '酒吧']
        }, {
          title: '情感',
          icon: '',
          tags: ['怀旧', '清新', '浪漫', '伤感', '治愈', '放松', '孤独', '感动', '兴奋', '快乐', '安静', '思念']
        }, {
          title: '主题',
          icon: '',
          tags: ['综艺', '影视原声', 'ACG', '儿童', '校园', '游戏', '70后', '80后', '90后', '网络歌曲', 'KTV', '经典', '翻唱', '吉他', '钢琴', '器乐', '榜单', '00后']
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.E-popover-playlist-classify {
  width: 571px;
  padding: 0 15px;
  overflow: hidden;
  overflow-y: scroll;
  max-height: 340px;
  $border: 1px solid #dcdfe6;
  .btn {
    cursor: pointer;
    &:hover {
      background: rgb(250, 250, 255);
    }
    &.active {
      background: #ecf5ff;
      color: #409eff;
    }
  }
  & > .btn-block {
    display: block;
    line-height: 30px;
    text-align: center;
    border: $border;
    margin: 10px 0;
  }
  & > dl {
    display: flex;
    margin-bottom: 10px;
    & > dt {
      flex: 0 0 80px;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      line-height: 30px;
      padding-right: 10px;
      & > i {
        font-size: 24px;
        vertical-align: sub;
      }
    }
    & > dd {
      flex-grow: 1;
      & > ul {
        display: inline-block;
        border-left: $border;
        border-top: $border;
        display: inline-flex;
        flex-wrap: wrap;
        & > li.btn {
          line-height: 30px;
          text-align: center;
          border-right: $border;
          border-bottom: $border;
          display: inline-block;
          width: 90px;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
